<template>
    <div>
        <!-- 顶部导航栏 -->
        <div class="header">
            <!-- 点击 logo 返回首页 -->
            <img style="width: 90px" @click="toPage('/userIndex')" src="../assets/image/logo.png" />
            <div class="header1">
                <div @click="toPage('/userIndex')" class="menu-item">首页</div>
                <div @click="toPage('/userEquipment')" class="menu-item">滑雪设备</div>
                <div @click="toPage('/userTrack')" class="menu-item">滑雪赛道</div>
                <div @click="toPage('/userCoach')" class="menu-item">教练展示</div>
                <div @click="toPage('/userOwn')" class="menu-item">个人中心</div>
            </div>
            <div class="header2">
                <!-- 显示当前用户名 -->
                <div class="header3">
                    {{ user?.name }}
                </div>
                <!-- 注销登录 -->
                <div class="header4" @click="loginOut">
                    退出登录
                </div>
            </div>
        </div>

        <!-- 滑雪赛道展示区域 -->
        <div class="track-showcase">
            <h1 class="title">滑雪赛道展示</h1>
            <div class="track-grid">
                <div v-for="track in tableData" :key="track.id" class="track-card">
                    <div class="track-info">
                        <h2 class="track-name">{{ track.name }}</h2>
                        <p class="track-difficulty">难度：{{ track.difficulty }}</p>
                        <p class="track-length">长度：{{ track.length }} 米</p>
                        <p class="track-status">
                            状态：
                            <span :class="track.status">{{ track.status }}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessageBox } from 'element-plus'

// 创建路由实例
const router = useRouter()

// 当前用户信息，从 localStorage 中读取
const user = ref(null)

// 赛道数据
const tableData = ref([])

// 页面跳转方法
const toPage = (path) => {
    router.push(path)
}

// 注销登录
const loginOut = () => {
    ElMessageBox.confirm('注销登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        localStorage.removeItem('user')
        router.replace('/login')
    })
}

// 页面加载时执行
onMounted(() => {
    // 读取本地缓存的用户信息
    const localUser = localStorage.getItem('user')
    if (localUser) {
        user.value = JSON.parse(localUser)
    } else {
        // 如果用户未登录，跳转回登录页
        router.replace('/login')
        return
    }

    // 获取赛道数据
    axios.get('http://localhost:8181/track/list').then((response) => {
        tableData.value = response.data
    })
})
</script>

<style src="../assets/css/header.css"></style>

<style scoped>
.track-showcase {
    padding: 20px;
    font-family: Arial, sans-serif;
    background-color: #e0f7fa;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.title {
    text-align: center;
    color: #00695c;
    font-size: 2.5rem;
    margin-bottom: 20px;
    animation: fadeInDown 1s;
}

.track-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.track-card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    padding: 20px;
}

.track-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.track-info {
    text-align: center;
}

.track-name {
    font-size: 1.5rem;
    color: #004d40;
    margin-bottom: 10px;
}

.track-difficulty,
.track-length,
.track-status {
    font-size: 1rem;
    color: #00796b;
    margin-bottom: 8px;
}

.track-status span {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    color: white;
}

.track-status .开放 {
    background-color: #2ecc71;
}

.track-status .维护中 {
    background-color: #f39c12;
}

.track-status .关闭 {
    background-color: #e74c3c;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
